<h2 class="page-header-left" *ngIf="loadedComponent">Component: {{ component.name }}</h2>
<mat-tab-group dynamicHeight>
  <mat-tab label="Summary">
    <mat-card class="card-large mat-elevation-z8" *ngIf="loadedComponent">
      <mat-card-header>
        <mat-card-title>Summary</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <table>
          <tbody>
            <tr>
              <td class="table-label">Name</td>
              <td class="table-data">{{ component.name }}</td>
            </tr>
            <tr>
              <td class="table-label">Kind</td>
              <td class="table-data">{{ component.kind }}</td>
            </tr>
            <tr>
              <td class="table-label">Type</td>
              <td class="table-data">{{ component.type }}</td>
            </tr>
            <tr>
              <td class="table-label">Created</td>
              <td class="table-data">{{ component.created }}</td>
            </tr>
            <tr>
              <td class="table-label">Age</td>
              <td class="table-data">{{ component.age }}</td>
            </tr>
            <tr *ngIf="component.scopes">
              <td class="table-label">Scopes</td>
              <td class="table-data">{{ component.scopes.join(", ") }}</td>
            </tr>
          </tbody>
        </table>
      </mat-card-content>
    </mat-card>
  </mat-tab>
  <mat-tab label="Configuration" *ngIf="loadedComponent">
    <mat-card class="card-large mat-elevation-z8" [ngStyle]="{ 'background-color': isDarkTheme() ? '#1e1e1e' : '' }">
      <app-editor [(model)]="componentManifest"></app-editor>
    </mat-card>
  </mat-tab>
</mat-tab-group>